<template>
  <el-aside width="240px" class="sidebar">
    <!-- 侧边栏标题 -->
    <el-row class="sidebar-title">
      <h2 @click="backHome">患者管理系统</h2>
    </el-row>
    <!-- 新增患者按钮 -->
    <el-row class="sidebar-actions">
      <el-button
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="addPatient"
      >
        新增患者
      </el-button>
    </el-row>
    <!-- 菜单列表 -->
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      :default-openeds="['patient-menu']" 
    >
      <!-- 患者子菜单 -->
      <el-sub-menu
        v-for="patient in patients"
        :key="patient.id"
        :index="`patient-${patient.id}`"
      >
        <template #title>
          <!-- 点击患者名称时触发的事件 -->
          <span @click="handleSubMenuClick(patient.id)">{{ patient.name }}</span>
        </template>
        <!-- 子菜单项 -->
        <el-menu-item :index="`basic-info-${patient.id}`">患者基本信息</el-menu-item>
        <el-menu-item :index="`epitope-detection-result-${patient.id}`">表位检测结果</el-menu-item>
        <el-menu-item :index="`vaccine-design-${patient.id}`">个性化疫苗设计结果</el-menu-item>
        <el-menu-item :index="`clinical-observation-${patient.id}`">用药临床观察</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";

// 接收props
defineProps(['patients'])

const router = useRouter();

// 处理菜单项选择事件
const handleSelect = (key: string) => {
  const [type, patientId] = key.split(/-(?=\d+$)/);

  switch (type) {
    case "basic-info":
      router.push({ name: "PatientBasicInfo", params: { patientId } });
      break;
    case "epitope-detection-result":
      router.push({ name: "EpitopeDetectionResult", params: { patientId } });
      break;
    case "vaccine-design":
      router.push({ name: "VaccineDesign", params: { patientId } });
      break;
    case "clinical-observation":
      router.push({ name: "ClinicalObservation", params: { patientId } });
      break;
    default:
      console.error(`Unknown type: ${type}`);
      break;
  }
};

// 处理点击患者名称时的事件
const handleSubMenuClick = (patientId: number) => {
  router.push({ name: "PatientCase", params: { patientId } });
};

// 处理返回首页的事件
const backHome = () => {
  router.push({ name: "Home" });
};

// 处理新增患者的事件
const addPatient = () => {
  router.push({ name: "CreatePatient" });
};



</script>

<style scoped>
.sidebar {
  padding: 20px;
  background-color: #f5f7fa;
  border-right: 1px solid #ebeef5;
}

.sidebar-title {
  margin-bottom: 20px;
}

.sidebar-actions {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

.sidebar-actions .el-button {
  width: 100%;
  max-width: 200px;
}

.el-menu-vertical-demo {
  width: 100%;
  background-color: #f5f7fa;
  border: none;
}

.el-menu-item {
  font-size: 14px;
  color: #333;
}

.el-sub-menu__title {
  font-weight: bold;
}

.el-menu-item:hover, .el-sub-menu__title:hover {
  background-color: #409eff;
  color: #fff;
}
</style>
